<template>
  <transition name="list-fade">
    <div class="playlist" v-show="showFlag" @click="hidden">
      <div class="list-wrapper" @click.stop>
        <div class="list-header">
          <h1 class="title">
            <i class="iconfont" :class="iconMode" @click="changeMode"></i>
            <span class="text">{{ modeText }}</span>
            <span class="clear" @click="showConfirm">
              <i class="iconfont iconlajitong"></i>
            </span>
          </h1>
        </div>
        <div ref="listContent" class="list-content">
          <ul>
            <li ref="listItem" class="item" v-for="(item, index) in sequenceList" :key="index" @click="selectItem(item, index)">
              <i class="current iconfont" :class="getCurrentIcon(item)"></i>
              <span class="text">{{ item.name }}</span>
              <i class="iconaixin iconfont"></i>
              <span class="like" @click.stop="deleteOne(item)">
                <i class="">X</i>
              </span>
            </li>
          </ul>
        </div>
        <div class="list-operate">
          <div class="add">
            <i class="mui-icon mui-icon-plusempty"></i>
            <span class="text">添加歌曲到队列</span>
          </div>
        </div>
        <div class="list-close" @click="hidden">
          <span>关闭</span>
        </div>
      </div>
      <confirm ref="confirm" @confirm="confirmClear" text="是否清空播放列表" confirmBtnText="清空"></confirm>
    </div>
  </transition>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import { playMode } from '@/common/js/config'
import BScroll from 'better-scroll'
import Confirm from '@/base/confirm/confirm'
import { playerMixin } from '@/common/js/mixin'

export default {
  mixins: [playerMixin],
  data () {
    return {
      showFlag: false
    }
  },
  methods: {
    show () {
      this.showFlag = true
      setTimeout(() => {
        this.scroll.refresh()
        this.scrollToCurrent(this.currentSong)
      }, 20)
    },
    hidden () {
      this.showFlag = false
    },
    // 列表中显示当前播放歌曲图标
    getCurrentIcon (item) {
      if (this.currentSong.id === item.id) {
        return 'iconarrow-'
      }
      return ''
    },
    selectItem (item, index) {
      if (this.mode === playMode.random) {
        index = this.playlist.findIndex((song) => {
          return song.id === item.id
        })
      }
      this.setCurrentIndex(index)
      this.setPlayingState(true)
    },
    // 滚动到播放位置
    scrollToCurrent (current) {
      const index = this.sequenceList.findIndex((song) => {
        return current.id === song.id
      })
      this.scroll.scrollToElement(this.$refs.listItem[index], 300)
    },
    deleteOne (item) {
      this.deleteSong(item)
      if (!this.playlist.length) {
        this.hidden()
      }
      this.setPlayingState(true)
    },
    // 开启提示框
    showConfirm () {
      this.$refs.confirm.show()
    },
    // 清空列表
    confirmClear () {
      this.deleteSongList()
      this.hidden()
    },
    ...mapMutations({
      setCurrentIndex: 'SET_CURRENT_INDEX',
      setPlayingState: 'SET_PLAYING_STATE'
    }),
    ...mapActions([
      'deleteSong',
      'deleteSongList'
    ])
  },
  watch: {
    currentSong (newSong, oldSong) {
      if (!this.showFlag || newSong.id === oldSong.id) {
        return
      }
      this.scrollToCurrent(newSong)
    }
  },
  computed: {
    modeText () {
      return this.mode === playMode.sequence ? '顺序播放' : this.mode === playMode.random ? '随机播放' : '单曲循环'
    },
    ...mapGetters([
      'sequenceList',
      'currentSong',
      'playlist',
      'mode'
    ])
  },
  mounted () {
    const options = {
      click: true,
      tap: true
    }
    var timerId = setInterval(() => {
      if (this.sequenceList) {
        console.log(8888888)
        // console.log(this.data)
        this.scroll = new BScroll(this.$refs.listContent, options)
        clearInterval(timerId)
        // console.log(this.scroll)
        // console.log(999)
      }
    }, 200)
  },
  components: {
    Confirm
  }
}
</script>

<style lang="less" scoped>
@import "~@/common/css/variable";
@import "~@/common/css/mixin";

ul {
  padding: 0;
  margin: 0;
}
.iconf {
  display: inline-block;
}
.playlist {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1001;
    background-color: rgba(0, 0, 0, 0.3);
    &.list-fade-enter-active, &.list-fade-leave-active {
      transition: opacity 0.3s;
      .list-wrapper {
        transition: all 0.3s;
      }
    }
    &.list-fade-enter, &.list-fade-leave-to {
      opacity: 0;
      .list-wrapper {
        transform: translate3d(0, 100%, 0);
      }
    }
    .list-wrapper {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      border-radius: 8px;
      background-color: @color-background;
      .list-header {
        position: relative;
        right: 0;
        padding: 0px 30px 10px 20px;
        .title {
          display: flex;
          align-items: center;
          .iconfont {
            margin-right: 10px;
            font-size: 20px;
            color: @color-text-g;
          }
          .text {
            flex: 1;
            font-size: @font-size-medium;
            color: @color-text;
            .count {
              position: relative;
              top: 1px;
            }
          }
          .clear {
            /*@include extend-click();*/
            .icon-clear {
              font-size: @font-size-medium;
              color: @color-text-g;
            }
          }
        }
      }
      .list-content {
        max-height: 240px;
        overflow: hidden;
        .item {
          display: flex;
          align-items: center;
          height: 40px;
          padding: 0 30px 0 20px;
          overflow: hidden;
          &.list-enter-active, &.list-leave-active {
            transition: all 0.1s;
          }
          &.list-enter, &.list-leave-to {
            height: 0;
          }
          .fa-volume-up {
            color: @color-theme;
            margin-right: 5px;
          }
          .text {
            flex: 1;
            @include no-wrap();
            line-height: 20px;
            font-size: @font-size-medium;
            color: @color-text;
          }
          .delete {
            @include extend-click();
            font-size: @font-size-small;
            color: @color-theme;
          }
        }
      }
      .list-operate {
        text-align: center;
        .add {
          display: inline-block;
          border: 1px solid #ccc;
          border-radius: 33px;
          padding: 6px;
          background: @color-background;
          font-size: @font-size-medium-x;
          color: @color-text;
        }
      }
      .list-close {
        text-align: center;
        margin-top: 6px;
        line-height: 50px;
        background: #2a83dc;
        font-size: @font-size-medium-x;
        color: @color-text;
      }
    }
}
.current {
  position: absolute;
  left: 0;
}
</style>
